<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../../style/js/layuii/css/layui.css">
    <script src="../../../style/js/layuii/layui.js"></script>
    <script src="../../style/js/jquery-3.2.1.min.js"></script>
    <script src="../../style/js/pdf.js"></script>
    <script src="../../style/js/pdf.worker.js"></script>
    <style>
        body .layui-table-cell {
            font-size: 12px;
        }
        .layui-form-select dl dd.layui-this {
            background-color: #60c7d0;
            color: #fff;
        }

        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #60c7d0;
        }

        .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
            border-width: 1px;
            border-style: solid;
            border-color: #dddddd;
        }
        /*固定列*/
        .layui-table-fixed .layui-table-body {
            height: auto!important;
        }

        .layui-table-fixed.layui-hide {
            display: block!important;
        }
    </style>
</head>
<body style="font-size: 12px">

<!--//页面标题-->
<div class="layui-row">
    <div class="layui-col-md12" style="text-align: center;margin-top: 25px;margin-bottom: 1%;">
        <span id="VouCher" style="font-weight: bold;font-size: 20px;">文件交接</span>
    </div>
</div>
<!--选项卡切换-->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this" style="font-size: 12px">上传文件</li>
        <li style="font-size: 12px">我的提交</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-inline" style="width: 700px">
                <div style="font-size: 12px;color: #AAAAAA;margin-top: 20px">
                    请点击上传区域，或将文件拖拽至上传区域。
                </div>
                <!--  拖拽上传   -->
                <div class="layui-upload-drag" id="uploadFile" style="width: 600px;height: 270px;border: 1px solid #dddddd">
                    <img style="margin-top: 30px" src="../../style/images/mobile/image/wenJianShenChuan.png"/>
                    <div class="layui-upload-list" style="max-width: 600px;margin-top: 70px;margin-left: -30px">
                        <table class="layui-table" style="width: 110.2%;">
                            <colgroup>
                                <col width="370">
                                <col width="300">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>文件名</th>
                                <th>大小</th>
                            </tr>
                            </thead>
                            <tbody id="demoList"></tbody>
                        </table>
                    </div>
                </div>
                <div style="height: 100px;width: 95%"></div>
            </div>
            <div class="layui-inline">
                <!--   文件详情信息   -->
                <div style="font-size: 12px;width: 500px">
                    <form class="layui-form">
                        <div class="" style="margin-top: 240px">
                            <label class="layui-form-label" style="line-height: 6px">文件详情：</label>
                            <div class="layui-input-inline">
                            <textarea type="text" id="xiangQing" style="width: 300px;height:24px;min-height: 60px;padding-left: 5px;border: 1px solid #dddddd"
                                      name="xiangQing" lay-verify="identity"
                                      placeholder="请输入文件详情" autocomplete="off"></textarea>
                            </div>
                        </div>
                        <div class="">
                            <div class="layui-input-inline">
                                <input type="text"
                                       style="width: 380px;background-color: #60c7d0;height: 24px;color: #FFFFFF;text-align: center;margin-top: 25px;margin-left: 32px"
                                       id="addWenJian" name="addWenJian" lay-verify="addWenJian"
                                       value="提交" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <table id="wenJianJiaoJieList" lay-filter="wenJianJiaoJieList"></table>
        </div>
    </div>
</div>
<!--查看详情弹框页-->
<div class="layui-form" id="chaKanXiangQing" style="display: none">
    <form id="hx" class="layui-form" action="javascript:;">
        <!--  提交人  -->
        <div class="layui-form-item ziti" id="tijiaoren" style="position: absolute;right: 10px;top: 40px;">
            <div class="layui-inline jinyong" style="margin-left: 20px;color: #8B8878;font-size:13px;">
                提交人:<span class="hx" id="tjr"></span>
            </div>
        </div>
        <!--  公司名称  -->
        <div class="layui-form-item" style="margin-top: 10px;">
            <div class="layui-inline">
                <span style="font-size: 13px;font-weight: 800;margin-left: 39px;"  id="hxgsname"></span>
            </div>
        </div>
        <!-- 提交时间  -->
        <div class="layui-form-item ziti" id="tijiaoshijian" style="margin-left: 18.5px;">
            <div class="layui-inline " style="margin-top:-13px;margin-left: 20px;color: #8B8878;font-size:13px;">
                提交时间:<span class="hx" id="tjsj"></span>
            </div>
        </div>

        <!--分割线-->
        <hr size="1" noshade="noshade" style="border:0.1px #cccccc dotted;">
        <!--   年检人员    class="anniu" -->
        <div class="layui-form-item huixian" style="margin-top: 10px">
            <div class="layui-inline jinyong">
                <label class="layui-form-label huixiantanchu ziti1" style="margin-top:-10px;margin-left: 30px;font-size: 12px;height: 40px">文件详情：</label>
                <span class="hx" id="wjxq"></span>
            </div>
        </div>

        <!--        附件展示-->
        <div class="layui-form-item huixian" style="margin-top: -30px">
            <div class="layui-inline jinyong" >
                <label class="layui-form-label huixiantanchu ziti1" style="margin-top:-11px;margin-left: 30px;font-size: 12px;" >查看附件：</label>
            </div>
            <div class="layui-row" style="margin-left: 62px;margin-top: 2px;font-size: 13px" id="lookFuJian">

            </div>
        </div>
        <!--        取消按钮-->
        <div class="layui-row" style="margin-top: 50px;">
            <div class="layui-form-item">
                <div class="layui-input-block" style="text-align: center;margin-right: 100px">

                    <button id="xiangQingQuXiao" type="button" class="layui-btn layui-btn-primary close"
                            style="height: 30px;line-height: 30px;width:220px;border-radius: 20px 20px 20px 20px;background-color: #60c7d0;color:white;border:none;margin-left: 40px">
                        取&nbsp;&nbsp;消
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/html" id="jiaoJiebar">
    <a class="zly-btn" lay-event="detail" style="color: #60c7d0">详情</a>
</script>
</body>
<script>
    layui.use(['upload', 'element', 'layer', 'table', 'jquery', 'form', 'carousel'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var carousel=layui.carousel;

        //表格渲染
        table.render({
            elem: '#wenJianJiaoJieList'
            , url: '/wenJinaJiaoJie/queryWenJianJiaoJie'//数据接口
            , page: true //开启分页
            , where: {"xianShiZhuangTai": 1}
            , cols: [[ //表头
                {title: '序号', templet: '#xuhao', type: 'numbers'}
                , {field: 'fileName', title: '文件名称', width: 270, align: 'left'}
                , {field: 'xiangQing', title: '文件详情', width: 300, align: 'left'}
                , {field: 'createTime', title: '添加时间', width: 240, align: 'left'}
                , {field: 'tiJiaoRenName', title: '提交人', width: 220, align: 'left'}
                , {fixed: 'right', align: 'center', title: '操作', width: 215, toolbar: '#jiaoJiebar'}
            ]]
        })

        table.on('tool(wenJianJiaoJieList)',function(obj){
            console.log(obj)
            if(obj.event==="detail"){
                layer.open({
                    type:'1',
                    title:'详情',
                    area:['550px', '100%'],
                    offset:'rt',
                    shadeClose:true,
                    content: $("#chaKanXiangQing"),
                    end:function(){
                        $("#hx")[0].reset();
                        $("#chaKanXiangQing").css("display","none");
                    }
                })
                var data=obj.data;
                $("#tjr").html(data.tiJiaoRenName);
                $("#hxgsname").html(data.companyName);
                $("#tjsj").html(data.createTime);
                $("#wjxq").html(data.xiangQing);

                // 附件回显
                let fujianPath = data.wenJian;
                let fjPath = fujianPath.split(",");
                $("#lookFuJian").html(" ");
                for (var j = 0; j < fjPath.length; j++) {
                    console.log(fjPath[j].replace(/\[|]/g,''))

                    if (fjPath[j] != null) {
                        // $("#tuPianA").append("<img class='yinying' style='padding: 3px; width: 80px;height: 80px;' data='" + paths[j].replace(/\[|]/g,'').replace(/\"/g, "") + "' src='" + paths[j].replace(/\[|]/g,'').replace(/\"/g, "") + "'  id='imgs" + j + "' title=" + j + "/>");
                        $("#lookFuJian").append("<span>"+fjPath[j].replace(/\[|]/g,'').replace(/\"/g, "").slice(64)+"</span>&nbsp;&nbsp;&nbsp;<button type='button' style='border:0;background-color:white;color:#60c7d0;font-size: 12px;' id='xiaZai" + j + "'>下载</button></br>")
                        var xiazaiPath = fjPath[j].replace(/\[|]/g,'');

                        $("#xiaZai"+j+"").click(function(){
                            console.log(xiazaiPath)
                            // console.log(fjPath[j].replace(/\[|]/g,''))
                            window.location.href = xiazaiPath.replace(/\"/g, "");
                        })
                    }
                }

                $("#xiangQingQuXiao").click(function(){
                    layer.closeAll();
                })
            }
        })

        //演示多文件列表
        var wenJian = [];
        var wenJianId = [];
        var fileName = [];
        var uploadListIns = upload.render({
            elem: '#uploadFile'
            , elemList: $('#demoList') //列表元素对象
            , url: '/wenJinaJiaoJie/uploadFile'
            , accept: 'file'
            , multiple: true
            , auto: true
            , choose: function (obj) {
                var that = this;
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    that.elemList.append(tr);
                    element.render('progress'); //渲染新加的进度条组件
                });
            }
            , done: function (res, index, upload) { //成功的回调
                var that = this;
                if (res.code === 0) {
                    var tr = that.elemList.find('tr#upload-' + index)
                        , tds = tr.children();
                    layer.msg("上传成功")
                    wenJian.push(res.filePath);
                    console.log(wenJian)
                    wenJianId.push(res.fileId)
                    console.log(wenJianId)
                    fileName.push(res.fileName)
                    // tds.eq(3).html(''); //清空操作
                    // $(".demo-reload").css("display","none");
                    // $(".demo-delete").css("display","block");
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                return;
                //}
                this.error(index, upload);
            }
            , error: function (index, upload) { //错误回调
                var that = this;
                var tr = that.elemList.find('tr#upload-' + index)
                    , tds = tr.children();
                // tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

        var data = {};
        var flag = false;
        $("#addWenJian").click(function () {

            if (flag) return  //防重复提交
            flag = true

            //详情非空判断
            var xiangQing = $("#xiangQing").val();
            if (xiangQing === "" || xiangQing === null || xiangQing === undefined) {
                layer.msg("请输入详情")
                flag = false;
                return;
            }

            console.log(JSON.stringify(wenJian))
            if (wenJianId.length === 0) {
                layer.msg("请选择需上传的文件")
                flag = false;
                return;
            }
            data.xiangQing = xiangQing;

            for(let i=0;i<wenJian.length;i++){
                data.wenJian = JSON.stringify(wenJian[i]);
                data.wenJianId = wenJianId[i].toString();
                data.fileName = JSON.stringify(fileName[i]);
                $.ajax({
                    url: '/wenJinaJiaoJie/addWenJianJiaoJie',
                    type: 'post',
                    data: JSON.stringify(data),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (obj) {
                        if (obj.code === i) {
                            layer.msg("添加成功", {time: 1000}, function () {
                                window.location.reload();
                            })
                        }
                        if(obj.code===500) {
                            layer.msg("添加失败", {time: 1000})
                        }
                    }
                })
            }
        })
    })
</script>
</html>


















